<template>
  <el-dialog
    title="订单跟踪"
    :append-to-body="true"
    :visible.sync="logisticsVisible"
    width="30%"
    @open="open"
    :before-close="hidden"
  >
    <p class="p1">{{'物流名称:'+(list.expressType?list.expressType:"")}}</p>
    <p class="p1">{{'物流单号:'+(list.expressTradeNo?list.expressTradeNo:"")}}</p>
    <p class="p1">{{'运输状态:'+(list.statusText?list.statusText:"")}}</p>
    <p>物流信息：</p>
    <el-steps direction="vertical" :active="100" finish-status="success" space="100px">
      <el-step
        v-for="(item,index) in list2"
        :key="index"
        :title="item.AcceptStation"
        :description="item.AcceptTime"
      ></el-step>
    </el-steps>

    <span slot="footer" class="dialog-footer">
      <el-button @click="hidden">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import axios from "axios";

export default {
  props: {
    logisticsVisible: "",
    tradeNo: ""
  },
  data() {
    return {
      list: {},
      list2: [],
      list3: [
        {
          AcceptStation:
            "【北京市】  【北京中关村】（010-62531128、010-62563952、010-62575966） 的 中海园李迎斌（13720091821） 已揽收",
          AcceptTime: "2019-09-09 20:21:30"
        },
        {
          AcceptStation:
            "【北京市】  快件离开 【北京中关村】 已发往 【荆州中转部】",
          AcceptTime: "2019-09-09 20:32:20"
        },
        {
          AcceptStation: "【北京市】  快件已经到达 【北京】",
          AcceptTime: "2019-09-10 00:35:38"
        },
        {
          AcceptStation: "【北京市】  快件离开 【北京】 已发往 【荆州中转部】",
          AcceptTime: "2019-09-10 00:37:51"
        }
      ]
    };
  },
  methods: {
    open() {
      this.getList();
    },
    hidden() {
      this.list = {};
      this.list2 = [];
      this.$emit("hidden");
    },
    getList() {
      axios
        .post("MallOrder/getExpress", {
          tradeNo: this.tradeNo.tradeNo,
          orderID: this.tradeNo.orderID
        })
        .then(response => {
          let res = response.data;
          if (res.code === 1) {
            this.list = res.data;
            this.list2 = res.data.Traces;
          } else {
            if (res.code === -14) {
              this.$store.commit("logout", this);
              this.$router.push({
                name: "login"
              });
            } else {
              this.$message({
                message: res.msg,
                type: "error"
              });
            }
          }
        });
    }
  }
};
</script>
<style  scoped>
.p1 {
  line-height: 30px;
}
</style>